
<html>

<wicket:extend>
<div class="container">
  <div class="span-19">
  <div class="span-9 tight">
  <!-- column1 -->
    <div class="span-9 tight">
    <!-- energy -->
    <h2 class="tight">Energy</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
    <h3 class="tight">Last 24 hours</h3>
    <h4 class="tight">Energy Generated: 23 kwH</h4>
    <h4 class="tight">Energy Consumed: 25 kwH</h4>
    <img wicket:id="BarChart"/>
    </fieldset>
    </div>
    <div class="span-9 tight">
    <!-- cooling -->
    <h2 class="tight" >Cooling</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
    <h4 class="tight">Temperature: <b>73&deg;F</b></h4>
    <h4 class="tight">Humidity: <b>40 %</b></h4>
    </fieldset>
    </div>
    <div class="span-9 tight">
    <!-- water -->
    <h2 class="tight">Water Heating</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
    <h3 class="tight">Today's Hot Water</h3>
    <h4 class="tight">6am to 10am</h4>
    <h4 class="tight">5pm to 11pm</h4>
    </fieldset>
    </div>
    <div class="span-9 tight">
    <!-- aquapond -->
    <h2 class="tight" style="padding-top: 1px">Aquaponics</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
    <h4 class="tight">Fishes: <span style="color:green">GOOD</span></h4>
    <h4 class="tight">Plants: <span style="color:#ff9900">OK</span></h4>
    </fieldset>
    </div>
  </div>
  <div class="span-10 last">
  <!-- column2 -->
    <div class="span-10">
    <!-- lighting -->
    <h2 class="tight">Lighting</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
      <p>Room  <input wicket:id="on" type="button" value="On" /> 
           <input wicket:id="off" type="button" value="Off" /></p> 
      <p>Bathroom  <input wicket:id="on" type="button" value="On" /> 
           <input wicket:id="off" type="button" value="Off" /></p> 
      <p>Kitchen  <input wicket:id="on" type="button" value="On" /> 
           <input wicket:id="off" type="button" value="Off" /></p> 
      <p>Living/Sleeping/Dining  <input wicket:id="on" type="button" value="On" /> 
           <input wicket:id="off" type="button" value="Off" /></p> 
      <p>Front Door  <input wicket:id="on" type="button" value="On" /> 
           <input wicket:id="off" type="button" value="Off" /></p> 
    </fieldset>  
    
    </div>
    <div class="span-10">
    <!-- recent activity -->
    <h2 class="tight" style="padding-top: 1px">Recent Activity</h2>
    <fieldset style="padding-top: 2px; padding-bottom: 1px;">
    <table style="border: 1px;" cellpadding="0" cellspacing="0" class="sortable" width="100%">
      <thead>
      <tr>
        <th>Date</th>
        <th>Time</th>
        <th>Room</th>
        <th>Activity</th>
      </tr>
      </thead>
      <tbody>
        <tr><td>3/13</td><td>19:07</td><td>Bathroom</td><td>Current lighting changed</td></tr>
        <tr><td>2/23</td><td>07:18</td><td>All</td><td>Sleep Mode Enabled</td></tr>
        <tr><td>2/02</td><td>19:45</td><td>All</td><td>User "Dad" logged out</td></tr>
        <tr><td>2/02</td><td>19:30</td><td>All</td><td>A/C Scheduler Enabled</td></tr>
        <tr><td>2/02</td><td>18:57</td><td>All</td><td>User "Dad" logged in</td></tr>
      </tbody>
    </table>
    </fieldset>
    </div>
  </div>
  </div>

  <!-- side bar -->
  <div class="span-5 last" style="text-align: right">
  <h2 class="tight">Login</h2>
  <p class="tight">Username: <input type="text" /></p>
  <p class="tight">Password: <input type="password"
    hidden="1" /></p>
  <input class="tight" type="submit" value="Log In" />
  <h2 class="tight">Date</h2>
  <p class="tight" wicket:id="time">date and time</p>
  <h2 class="tight">Weather</h2>
  <p class="tight"> Indoor   72&deg;F</p>
  <p class="tight"> Outdoor  79&deg;F</p>
  <h2 class="tight">Services</h2>
  <div class="span-3">
  <p class="span 3 tight"> Energy</p>
  <p class="span 3 tight"> Lighting</p>
  <p class="span 3 tight"> Cooling</p>
  <p class="span 3 tight"> Water Heating</p>
  <p class="span 3 tight"> Aquaponics</p>
  <p class="span 3 tight"> Media</p>
  <p class="span 3 tight"> Voice</p>
  <p class="span 3 tight"> Secuirty </p>
  </div>
    <div class="span-2 last">
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running</p>
  <p class="span 3 tight"> Running </p>
  </div>
  
  </div>
</div>
</wicket:extend>
</html>

